import Input from '@/components/Input'
import NavBar from '@/components/NavBar'
import styles from './index.module.scss'

import { useFormik } from 'formik'
// 官方文档https://formik.bootcss.com/api/useFormik

import * as Yup from 'yup'
import { useDispatch } from 'react-redux'
import { Authorizations, SendCodes } from '@/store/action/user'
import { Toast } from 'antd-mobile'
import { useEffect, useRef, useState } from 'react'
import { useHistory, useLocation } from 'react-router'
// import { Link } from 'react-router-dom'

type FormValues = {
  mobile: string
  code: string
}

export default function Login() {
  const history = useHistory()
  // console.log(111111, history)

  const location = useLocation<{ from: string }>()

  const formik = useFormik({
    // 表单初始值
    // 用断言来确定type
    initialValues: {
      mobile: '15875339307',
      code: '',
    } as FormValues,
    //提交表单
    onSubmit: async (values) => {
      console.log(values)
      await dispatch(Authorizations(values))
      Toast.show({ content: '登录成功' })
      // 如果有重定向设置的location.state 没有就是undefine
      const target = location.state ? location.state.from : '/home/profile'
      history.push(target)
    },
    //校验表单
    // validate: (values) => {
    //   const error = {} as FormValues
    //   if (!/^1[3-9]\d{9}$/.test(values.mobile)) {
    //     error.mobile = '手机号验证错误信息'
    //   }
    //   if (!/^\d{6}$/.test(values.code)) {
    //     error.code = '验证码验证错误信息'
    //   }
    //   //返回错误对象
    //   return error
    // },

    //使用Yup第三方库来校验（因为条件多自己写麻烦）
    // 固定格式
    validationSchema: Yup.object().shape({
      mobile: Yup.string()
        .required('必填项')
        .matches(/^1[3-9]\d{9}$/, '手机号格式错误'),
      code: Yup.string()
        .required('必填项')
        // matcher匹配正则
        .matches(/^\d{6}$/, '验证码格式错误'),
    }),
  })

  const dispatch = useDispatch()

  // 验证码倒计时定时器
  const [time, setTime] = useState(0)

  //通过Ref来存timeId初始值 最好不要在全局使用let 一个可变的变量
  const timerId = useRef(-1)

  useEffect(() => {
    return () => {
      clearInterval(timerId.current)
    }
  }, [])
  //发送短信验证码
  const handleSendCodes = async () => {
    //校验不通过 不发送请求
    if (time > 0) return
    if (formik.errors.mobile) return Toast.show({ content: '手机号格式错误' })
    await dispatch(SendCodes(formik.values.mobile))
    Toast.show({ content: '发送验证码成功' })
    //开启倒计时
    setTime(60)
    //setTimeout要指定是window里面的，否则ts会认为是node里面的
    timerId.current = window.setInterval(() => {
      // 💥当我们每次都想要获取到最新的状态，需要写成 箭头函数 的形式
      setTime((time) => {
        console.log('定时器内部的time值', time)
        if (time === 1) clearInterval(timerId.current)
        return time - 1
      })
    }, 100)
    //页面卸载也要卸载定时器，否则会内存泄漏
  }
  return (
    <div className={styles.root}>
      <NavBar>登录</NavBar>
      {/* <Link to="/">去首页，测试定时器</Link> */}
      <div className="content">
        {/* 标题 */}
        <h3>短信登录</h3>
        <form onSubmit={formik.handleSubmit}>
          {/* 手机号输入框 */}
          {/* 通过onBlur事件 + formik.touched  事件提升用户体验 */}
          <div className="input-item">
            <Input
              className="input"
              name="mobile"
              placeholder="请输入手机号"
              autoComplete="off"
              onBlur={formik.handleBlur}
              errMsg={formik.touched.mobile ? formik.errors.mobile : ''}
              value={formik.values.mobile}
              onChange={formik.handleChange}
            />
          </div>

          {/* 短信验证码输入框 */}
          <div className="input-item">
            <Input
              className="input"
              name="code"
              placeholder="请输入验证码"
              maxLength={6}
              autoComplete="off"
              onBlur={formik.handleBlur}
              errMsg={formik.touched.code ? formik.errors.code : ''}
              extra={<span onClick={handleSendCodes}>{time === 0 ? '获取验证码' : `${time}秒后重试`}</span>}
              value={formik.values.code}
              onChange={formik.handleChange}
            />
          </div>

          {/* 登录按钮 */}
          {/* 利用formik.isValid来确定输入框状态 */}
          <button type="submit" className="login-btn" disabled={!formik.isValid}>
            登录
          </button>
          {/* <h3>当前错误对象{JSON.stringify(formik.errors)}</h3>
          <h3>当前触摸失去焦点的对象:{JSON.stringify(formik.touched)}</h3> */}
        </form>
      </div>
    </div>
  )
}
